<template>
  <!-- 诊断项 -->
  <BaseMainSlot>
    <template v-slot:searchbox>
      <el-collapse v-model="activeName" accordion @change="handleChange">
        <el-collapse-item name="1">
          <template slot="title">
            <div class="select-btns search-btns" @click.stop="changeSelect()">
              <i class="el-icon-circle-check"></i>
              <p v-if="activeName === '1'">收起筛选</p>
              <p v-if="activeName === ''">展开筛选</p>
            </div>
          </template>
          <div class="search-btn search-btns" @click.stop="queryPageList()">
            <i class="el-icon-circle-check"></i>
            <p>查询</p>
          </div>
          <div class="select-box-content">
            <div class="select-box-content-name">诊断项名称</div>
            <el-select filterable clearable v-model="searchObj.diagnosisItemId" >
              <el-option v-for="item of featuresList" :key="item.diagnosisItemId" :label="item.diagnosisItemName"
                :value="item.diagnosisItemId" />
            </el-select>
          </div>
          <div class="select-box-content">
            <div class="select-box-content-name">诊断项症状编号</div>
            <el-input v-model="searchObj.diagnosisItemSymbolNo" clearable />
          </div>
        </el-collapse-item>
      </el-collapse>
    </template>
    <template v-slot:btnsBar>
      <ActionBar :add-active="addActive" :del-active="delActive" :page-no="163" @add="add" @del="del" />
    </template>
    <template v-slot:content>
      <el-table ref="tableData" v-loading="loading" highlight-current-row :data="tableData" stripe border
        height="calc(100% - 50px)" :row-key="row => { return row.diagnosisItemSymbolId; }"
        @selection-change="handleSelectionChange" @select="select" @select-all="selectAll">
        <el-table-column type="selection" width="55" :reserve-selection="true"
          :selectable="(row) => { return !row.selectable }" />
        <el-table-column type="index" label="序号" width="50">
          <template slot-scope="scoped">{{ scoped.row.diagnosisItemSymbolId ? scoped.$index + 1 : '' }}</template>
        </el-table-column>
        <el-table-column prop="diagnosisItemName" label="诊断项名称" />
        <el-table-column prop="diagnosisItemSymbolNo" label="诊断项症状编号" />
        <el-table-column prop="diagnosisItemSymbolDesc" label="特征描述" />
        <el-table-column prop="fileId" label="特征图片">
          <template v-if="scope.row.diagnosisItemSymbolId" slot-scope="scope">
            <el-button type="text" @click="handlePicShow(scope.row.fileIdList)">查看图片</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="250">
          <template v-if="scoped.row.diagnosisItemSymbolId" slot-scope="scoped">
            <div class="table-btns-box">
              <div class="table-btns edit-btns" @click="edit(scoped.row)">
                <!-- <div class="table-btns edit-btns" @click="edit(scoped.row)"  v-if="judgePermission(163,'edit')"> -->
                <p>修改</p>
              </div>
              <div class="table-btns del-btns" @click="delOne(scoped.row)">
                <!-- <div class="table-btns del-btns" @click="delOne(scoped.row)"  v-if="judgePermission(163,'deleteone')"> -->
                <p>删除</p>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog :title="(titleText || '') + '图片'" :visible="showPictureDialog" @close="closePictureDialog" width="680px">
        <div v-if="imageData"
          style="min-height:200px;max-height: 425px;overflow: auto;display: flex;justify-content: flex-start;flex-wrap: wrap;">
          <!-- <img v-for="url, index in imageData" :src="url" :key="index" height="300px;" style=" margin:10px;" alt="" /> -->
          <el-image v-for="url, index in imageData" :key="index" style="width: 200px; height: 200px;margin: 5px;"
            :src="url" :preview-src-list="imageData">
          </el-image>
        </div>
        <div v-else>暂无内容</div>
      </el-dialog>

      <Pagination :page-size="pageSize" :current-page="currentPage" :total-size="totalSize"
        @changeCurrentPage="changeCurrentPage" />
      <AddEditDialog ref="addEditDialog" :now-chance-stau="nowChanceStau" :title-text="titleText"
        :edit-object="editObject" :show.sync="showAddEditDialog" @closeDialog="closeDialog" @cancelDialog="cancel"
        :thisfileId="currentFileId" :isimg="isimg" :imageData="imageData" v-if="ifAddEditDialog"
        :ifAddEditDialog.sync='ifAddEditDialog' />
    </template>
  </BaseMainSlot>
</template>

<script>
import ActionBar from "@/components/ActionBar";
import Pagination from "@/components/Pagination";
import BaseMainSlot from "@/components/BaseMainSlot/kong-new2.vue";
import AddEditDialog from "./components/add-edit-dialog.vue";
import { mymixin } from "@/utils/mixin";
import { blobToBase64 } from "@/utils/convert";

import { mapGetters } from "vuex";

import DiseaseFeaturesManageApi from "@/api/disease-bank-manage/disease-features-manage/index";
import FeaturesTypeManageApi from "@/api/disease-bank-manage/features-type-manage/index";
import DocumentApi from "@/api/document"

export default {
  name: "DiseaseFeaturesManage",
  components: { ActionBar, Pagination, BaseMainSlot, AddEditDialog },
  mixins: [mymixin],
  data () {
    return {
      ifAddEditDialog: false,
      // 查询条件：
      searchObj: {},
      featuresList: [],// 诊断项
      fileIdList: [],//文件ID
      checkedIdList: [], // 表格选中项
      imageData: [],
      isimg: false, //修改/添加时是否展示图片
    };
  },
  computed: {
    ...mapGetters({
      judgePermission: "permission/judgePermission"
    })
  },
  watch: {},
  created () {
    this.queryPageList();
    this.queryFeatures();
  },
  mounted () { },
  methods: {
    // 查看图片
    handlePicShow (fileIdList) {
      // console.log('fileId***', fileId);
      if (fileIdList && fileIdList.length > 0) {
        fileIdList.split(',').forEach(fileId => {
          DocumentApi.fileDownload({ fileId: fileId }).then(res => {
            blobToBase64(res.data).then(res2 => {
              this.imageData.push(res2)
            })
          })
        })
        this.showPictureDialog = true;
      } else {
        this.$message.info('无上传图片！')
      }
    },
    closePictureDialog () {
      this.showPictureDialog = false
      this.imageData = []
    },
    queryFeatures () {
      FeaturesTypeManageApi.queryByCondition().then(res => {
        if (res.data?.length > 0) this.featuresList = res.data;
      })
    },
    queryPageList () {
      let params = {
        page: this.currentPage,
        size: this.pageSize,
        entity: { ...this.searchObj }
      };
      DiseaseFeaturesManageApi.queryPageByCondition(params).then(res => {
        // console.log(res);
        if (res.success === true) {
          let data = res.data || {};
          this.totalSize = data.totalElements;
          // 赋值数组
          this.tableData = data.content;
          this.addblankmet();
          this.resetActionBar();
        }
      });
    },
    changeCurrentPage (currentPage) {
      this.currentPage = currentPage;
      this.queryPageList();
    },
    selectAll (list) {
      let notvalue = true;
      list.forEach(item => {
        if (!item.diagnosisItemSymbolId) {
          notvalue = false;
        }
      });
      if (notvalue === false) {
        this.$message.warning("不可选择空数据！");
      }
    },
    select (list) {
      let notvalue = true;
      list.forEach(item => {
        if (!item.diagnosisItemSymbolId) {
          notvalue = false;
        }
      });
      if (notvalue === false) {
        this.$message.warning("不可选择空数据！");
      }
    },
    handleSelectionChange (list) {
      this.checkedIdList = [];
      let notvalue = true;
      let emptyList = [];
      this.checkedIdList = list.map(item => {
        if (item.diagnosisItemSymbolId) {
          return item.diagnosisItemSymbolId;
        } else {
          notvalue = false;
          emptyList.push(item);
          return "";
        }
      });
      if (notvalue === false) {
        // this.$message.warning("不可选择空数据！");
        this.toggleNoSelection(emptyList);
        return;
      }
      if (this.checkedIdList.length >= 1) this.delActive = true;
      else this.delActive = false;
    },
    // 单个删除
    delOne (data) {
      this.$confirm("此操作将永久删除该项, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        
      })
        .then(() => {
          DiseaseFeaturesManageApi.delById({ id: data.diagnosisItemSymbolId }).then(res => {
            if (res.success === true) {
              this.$message.success("删除成功!");
              this.queryPageList();
              this.resetActionBar();
            }
          });
        })
        .catch(() => {
          this.resetActionBar();
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 表格删除
    delmessage () {
      DiseaseFeaturesManageApi.delListById({ idList: this.checkedIdList }).then(res => {
        if (res.success) {
          this.$message.success("删除成功");
          this.queryPageList();
          this.resetActionBar();
        }
      });
    },
    // 添加
    add () {
      this.nowChanceStau = "add";
      this.titleText = "添加";
      this.addActive = false;
      this.delActive = false;
      this.showAddEditDialog = true;
      this.isimg = false
      this.ifAddEditDialog = true
    },
    // 修改
    edit (row) {
      if (row.diagnosisItemSymbolId) {
        this.ifAddEditDialog = true
        this.$nextTick(function () {
          this.editObject = JSON.parse(JSON.stringify(row));
          this.nowChanceStau = "edit";
          this.titleText = "修改";
        })
        this.addActive = false;
        this.delActive = false;
        this.showAddEditDialog = true;
        console.log('点击修改按钮获取fileId', row.fileIdList);
        this.currentFileId = row.fileIdList
        this.isimg = true
      } else {
        this.editObject = {};
      }
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-image {
  opacity: 0.8;
  transition: all 0.2s;
}

::v-deep .el-image:hover {
  border: 1px solid #cecece;
  opacity: 1;
}
</style>
